<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>资源详情</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" th:href="@{/css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" href="/css/back-index.css"  th:href="@{/css/back-index.css}"/>
    <link rel="stylesheet" href="/layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>
    <script src="/layui/layui.js"></script>
    <style type="text/css">
        .my-video {
            margin: 30px auto auto auto;

        }
        .bgColor {
            background: black;
        }
        .padding-0 {
            padding: 0 0 !important;
        }

    </style>

    <script type="text/javascript" >
        $(function(){
            //返回资源列表
            $("#back").on('click', function(){
                $('#frame-id', window.parent.document).attr('src',
                    '/backResource/showResources?courseId='+[[${courseId}]]+'&chapterId='+[[${chapterId}]]);
            });
        });
        $(function () {
            //1:mp4;2:pdf
            let fileType=[[${fileType}]];
            if (fileType==2){
                console.log("pdf");
                $("#source-pdf").show();
                $("#source-mp4").hide()
            }
            if(fileType==1){
                console.log("mp4");
                $("#source-mp4").show();
                $("#source-pdf").hide();
            }
        })
    </script>
</head>

<body>
    <div class="panel panel-default" id="userSet">
        <div class="panel-heading">
            <h3 class="panel-title">资源详情</h3>
        </div>
        <div>
            <input type="button" value="返回资源列表" class="btn btn-success" id="back" style="margin: 5px 15px 5px 0px;float: right;" />
        </div>
        <div style="margin-top: 40px;">

            <div class="container-fluid padding-0 bgColor" id="source-mp4" hidden>
                <video style="width: 100%; height:550px;" controls="controls">
                    <source  id="resource-mp4" th:src="${path}" >
                </video>
            </div>

            <div class="container-fluid padding-0 bgColor" id="source-pdf" hidden>
          <iframe id="resource-pdf" style="width: 100%; height:550px;" th:src="${path}"/>
            </div>

        </div>
    </div>

</body>

</html>